<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'供应商结算查询',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft" @click="sxshow=true">筛选</view>
			</view>
		</header-top>
		<u-popup round="20" :show="sxshow" @close="sxshow=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>  
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="shows=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="showss=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top" @click="selectRole('/pages/workbench/jiben/gongyingsda?type=1')">
					<input type="text" placeholder="选择供应商" disabled="true" v-model="supplier_name">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="init()">确认</view>
				</view>
			</view>
		</u-popup>
		<view class="mainpadding">
			<view class="flexbetween">
				<input class="input-text" type="text" placeholder="请输入单号/商品名称/业务员/客户" v-model="keywords">
				<view class="sousuo" @click="init">搜索</view>
			</view>
			<view class="flexcenter" v-if="!list.data">
				<view class="placeholderimage"></view>
			</view>
			<view class="radius radius mainpadding_top ffffff" v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="nostrongtext margin_right">{{item.order_no}}</view>
					</view>
					<!-- <view class="shlable radius">已审核</view> -->
					<!-- <view class="shlables radius">未审核</view> -->
				</view>
				<view class="margin_top flexbetween">
					<view class="flexleft">
						<view class="titletext">{{item.supplier.name}}</view>
						<view class="namecolor">{{item.supplier.username}}
						</view>
						<view class="flexright" @click.stop="phone(item.supplier.mobile)">
							<view class="littleblue"></view>
						</view>
					</view>
					<view class="namecolor">￥{{item.pay_price}}</view>
				</view>
				<view class="margin_top xiaohui flexbetween needbotborder" v-if="item.staff">
					<view class="flexstart" >
						<view class="">经办人：{{item.staff.username}}</view>
						<view class="dizhiimg" @click.stop='phone(item.staff.mobile)'></view>
					</view>
					<view>{{item.createtime_text}}</view>
				</view>
				<view class="xiaohui margin_top yihang" v-if="item.pay_type">支付方式：{{item.pay_type==10?"微信支付":item.pay_type==20?"支付宝支付":item.pay_type==30?"银行卡支付":item.pay_type==40?"余额支付":""}}</view>
				<view class="xiaohui margin_top yihang " v-show="item.notes">备注：{{item.notes}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				sxshow: false,
				currents: -1,
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				maxtime: Number(new Date()),
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],
				keywords:'',
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				supplier_id:"",
				supplier_name:"",
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			uni.$off("gysSelectFn")
			uni.$on("gysSelectFn", data => {
				this.supplier_id = data.id
				this.supplier_name = data.name
				return false
			})
		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			init(isPage, page) {
				this.sxshow = false
				let _this = this;
				httpRequest.request('/dhtapi/Supplieryskorder/index', 'POST', {
					page: page || 1,
					limit: _this.limit,
					keywords: this.keywords,
					supplier_id:this.supplier_id,
					start_time:this.start=="开始时间"?"":this.start,
					end_time:this.end=="结束时间"?"":this.end
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 客户计算详情
			jumpdetailkhjs(purchase_code){
				uni.navigateTo({
					url: '/pages/workbench/caiwu/gongyingsjsdetail?purchase_code=' + purchase_code
				})
			},
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 重置
			resetbtn(){
				this.currentstatus = -1
				this.currents = -1
				this.start = "开始时间"
				this.end = "结束时间"
				this.init()
				this.sxshow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex1{
		flex: 1.5;
	}
	.flex2{
		flex: 1;
	}
	.nostrongtext{
		width: 100%;
	}
	.nostrongtextts{
		font-size: 28rpx;
		font-weight: 400rpx;
		color: #333333;
	}
	.huanhang{
		word-break:break-all;
	}
	.bianma {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.righticon2 {
		width: 13rpx;
		height: 20rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.input-text {
		width: 588rpx;
		padding: 18rpx 0 18rpx 32rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.sousuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}
	.redtext{
		color: #ff0000;
	}
	.greentext{
		color: #01b757;
	}
	.posibottom{
		background-color: #fff;
		position:fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.paddingbom{
		padding-bottom: 160rpx;
	}
	.shlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		background-color: #e7f9fa;
	}
	
	.shlables {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: rgba(243, 173, 61, .1);
	}
	// 筛选内容
	.screenbox {
		width: 33.33%;
	}
	
	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}
	
	.inputscreenbox {
		width: 40%;
	
		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}
	.surebtn {
		width: 45%;
	}
	
	.reset {
		background: #ebb563;
	}
	
	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}
	
	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}
	
	// 选择框
	.itemscreens {
		padding-bottom: 20rpx;
	}
	
	.rightscreen {
		width: 100%;
	}
	
	.minwidth {
		min-width: 130rpx;
	}
	
</style>
